<template>
  <div class="login-container" id="login">
    <div class="login-box">
      <div class="companyName">温州重点关注任务</div>
      <div class="form-box">
        <el-form
          ref="loginForm"
          class="form-box"
          :model="loginForm"
          :rules="formRules"
        >
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user" maxlength="16" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" :show-password="true" placeholder="请输入密码" prefix-icon="el-icon-unlock" maxlength="12" />
          </el-form-item>
          <el-form-item prop="verifyCode">
            <el-input
              v-model="loginForm.verifyCode"
              placeholder="请输入验证码"
              maxlength="8"
            ></el-input>
            <img
              :src="codeUrl"
              style="
                height: 34px;
                float: right;
                margin-top: -37px;
                margin-right: 1px;
                z-index: 999;
                position: relative;
                border-radius: 5px;"
              @click="getCode"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              @click="submit"
              style="width:100%;margin-top: 2em;"
              type="primary"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data() {
    return {
      loginForm:{
        username:'',
        password:'',
        verifyCode: ''
      },
      formRules: {
        username: [{ required: true, message: '输入用户名' }],
        password: [{ required: true, message: '请输入密码' }],
        verifyCode: [{ required: true, message: '请输入验证码' }],
      },
      codeUrl:'',
      uuid:''
    }
  },
  created(){
    this.getCode()
  },
  methods: {
    getCode(){
      this.$api.captchaImage().then(res=>{
        if(res.status === 200){
          this.codeUrl = 'data:image/jpg;base64,'+res.data.img
          this.uuid = res.data.uuid
        }
      })
    },
    submit(){
      const params = {
          _gp: "admin",
          _mt: "login",
          username: this.loginForm.username,
          password: this.loginForm.password,
          verifyCode: this.loginForm.verifyCode,
          uuid: this.uuid
      }
      this.$api.commonApi(params).then(res=>{
        if(res.data.errno === 200){
          localStorage.setItem("token", res.data.data)
          this.$message.success("登录成功")
          setTimeout(()=>{
            this.$router.push({path: '/homePage'})
          }, 1500)
        }else{
          this.getCode()
          this.$message.error(res.data.errmsg)
        }
      })
    }
  },
};
</script>
<style scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/login_back.png") no-repeat;
  background-size: cover;
  font-size: 15px;
}
.login-box {
  background-color: #FFFFFF; 
  box-shadow: 0px 4px 9px 0px rgba(38, 74, 139, 0.1);
  border-radius: 3px;
  width: 25em;
  height: 28.6em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.companyName {
  font-size: 1.5em;
  text-align: center;
  font-weight: 500;
  color: #1890FF;
  margin-top: 2.5em;
}
.el-button--primary {
  height: 46px;
}
.form-box {
  width: 19.1em;
  margin: 2.5em auto 0;
}
div.info-text {
  text-align: right;
  cursor: pointer;
}
.info-text {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  color: rgba(68, 68, 68, 1);
}
.view-icon {
  margin-right: 8px;
}

</style>
